import React, { useEffect, useState, useRef } from 'react';
import { Space, Table, Tag, Button, Switch } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { connect } from 'umi';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import Draggable from 'react-draggable';
import Delservice from '../components/delservice';
import SandModal from '../components/sandModal';
import html2canvas from 'html2canvas';

const onChange = (key: string) => {
  console.log(key);
};

function sandtable(props: any) {
  const ht: any = useRef('');
  const [img, setImg] = useState('');
  const [flag, setFlag] = useState(false);
  const [text, setText] = useState('');
  const [delopen, setDelopen] = useState(false);
  const [name, setName] = useState('');
  const [type, setType] = useState('');
  const [id, setId] = useState('');
  const [sandopen, setsandopen] = useState(false);
  const [sandtype, setSandtype] = useState('');
  const [sanddata, setsanddata] = useState({});
  const canvasHtml = () => {
    console.log(ht.current);

    html2canvas(ht.current, {
      useCORS: true, //开启跨域(https)
    }).then((canvas) => {
      const url = canvas.toDataURL();
      setImg(url);
    });
  };
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: (
        <div>
          <div>
            <img
              width={'50'}
              height="20"
              src="https://img2.baidu.com/it/u=2220565380,2694932281&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=466"
              alt=""
            />
          </div>
        </div>
      ),
      children: (
        <div>
          <div ref={ht}>
            <img
              width={'100%'}
              height="240"
              src="https://img2.baidu.com/it/u=2220565380,2694932281&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=466"
              alt=""
            />
            {flag ? (
              <Draggable>
                <div className="fd">{text}</div>
              </Draggable>
            ) : (
              ''
            )}
          </div>
        </div>
      ),
    },
    {
      key: '2',
      label: (
        <div>
          <img
            width={'50'}
            height="20"
            src="https://img0.baidu.com/it/u=2934662222,135315967&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1064"
            alt=""
          />
        </div>
      ),
      children: (
        <img
          width={'100%'}
          height="240"
          src="https://img0.baidu.com/it/u=2934662222,135315967&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1064"
          alt=""
        />
      ),
    },
    {
      key: '3',
      label: (
        <img
          width={'50'}
          height="20"
          src="https://img1.baidu.com/it/u=2607041198,791667929&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
          alt=""
        />
      ),
      children: (
        <img
          width={'100%'}
          height="240"
          src="https://img1.baidu.com/it/u=2607041198,791667929&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
          alt=""
        />
      ),
    },
  ];

  const columns: any = [
    {
      title: '楼层名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '楼层数',
      dataIndex: 'elevator',
      key: 'elevator',
    },
    {
      title: '销售状态',
      dataIndex: 'sale_status',
      key: 'sale_status',
      render: (item: any) => {
        return <span>{item > 0 ? '在售' : '无'}</span>;
      },
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      render: (item: any) => {
        return (
          <Switch
            checkedChildren="正常"
            unCheckedChildren="禁用"
            defaultChecked={item === 1 ? true : false}
          />
        );
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <Space>
          <Button
            size="small"
            style={{ background: '#009688', color: '#fff' }}
            onClick={() => {
              setFlag(!flag);
              setText(`${record.title}(在售)`);
            }}
          >
            {/* {flag ? '移除' : '添加'} */}
            添加
          </Button>

          <Button
            size="small"
            style={{ background: '#1E9FFF', color: '#fff' }}
            onClick={() => {
              setsandopen(true);
              setSandtype('edit');
              setsanddata(record);
            }}
          >
            编辑
          </Button>

          <Button
            size="small"
            style={{ background: '#FF5722', color: '#fff' }}
            onClick={() => delhouse(record)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];
  const delhouse = (item: any) => {
    setDelopen(true);
    setName(item.title);
    setType('沙盘');
    setId(item.id);
    // console.log(item);
  };
  const closedel = (item: any) => {
    setDelopen(false);
  };
  useEffect(() => {
    props.dispatch({ type: 'area/getsandlist' });
  }, []);
  const close = () => {
    setsandopen(false);
  };
  return (
    <div>
      <div className="head">
        <Button
          onClick={() => {
            setsandopen(true);
            setSandtype('add');
          }}
        >
          添加楼栋
        </Button>
      </div>
      <div className="flex">
        <Table columns={columns} dataSource={props.sandList} />

        <div>
          <div>
            <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
          </div>
          <div>
            <button onClick={canvasHtml}>保存沙盘</button>
            <img style={{ width: 500, height: 240 }} src={img} alt="" />
          </div>
        </div>
      </div>
      <Delservice
        open={delopen}
        close={closedel}
        name={name}
        type={type}
        id={id}
      ></Delservice>
      <SandModal
        open={sandopen}
        close={close}
        type={sandtype}
        data={sanddata}
      ></SandModal>
    </div>
  );
}

const mapStateToProps = (state: any) => {
  const { sandList } = state.area;
  return {
    sandList,
  };
};

export default connect(mapStateToProps)(sandtable);
